<%-- 
    Document   : testFullCalendar
    Created on : 24/11/2012, 07:17:05 PM
    Author     : froy
--%><%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel='stylesheet' type='text/css' href='rs/css/fullcalendar/fullcalendar.css' />
        <link rel="stylesheet" type="text/css" href="/bibliotecaUNIVA/rs/css/jqueryUI/ui-lightness/jquery-ui-1.9.2.custom.min.css" />
        <script type='text/javascript' src='rs/js/jquery-1.8.2.min.js'></script>
        <script type='text/javascript' src='rs/js/jquery-ui-1.9.2.custom.js'></script>
        <script type='text/javascript' src='rs/js/fullcalendar/fullcalendar.min.js'></script>
        <title>JSP Page</title>
    </head>
    <style type='text/css'>
        body {
            margin-top: 40px;
            text-align: center;
            font-size: 14px;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        }
        #wrap {
            width: 1100px;
            margin: 0 auto;
        }
        #external-events {
            float: left;
            width: 150px;
            padding: 0 10px;
            border: 1px solid #ccc;
            background: #eee;
            text-align: left;
        }
        #external-events h4 {
            font-size: 16px;
            margin-top: 0;
            padding-top: 1em;
        }
        .external-event { /* try to mimick the look of a real event */
            margin: 10px 0;
            padding: 2px 4px;
            background: #3366CC;
            color: #fff;
            font-size: .85em;
            cursor: pointer;
        }
        #external-events p {
            margin: 1.5em 0;
            font-size: 11px;
            color: #666;
        }
        #external-events p input {
            margin: 0;
            vertical-align: middle;
        }
        #calendar {
            float: right;
            width: 900px;
        }
    </style>
    <body>
        <div id='wrap'>
            <div id='external-events'>
                <h4>Draggable Events</h4>
                <div class='external-event'>My Event 1</div>
                <div class='external-event'>My Event 2</div>
                <div class='external-event'>My Event 3</div>
                <div class='external-event'>My Event 4</div>
                <div class='external-event'>My Event 5</div>
                <p>
                    <input type='checkbox' id='drop-remove' />
                    <label for='drop-remove'>remove after drop</label>
                </p>
            </div>
            <div id='calendar'></div>
            <div style='clear:both'></div>
            <input type="hidden" value="" id="_hidValue"/>
            <div id="_divDialog"></div>
        </div>
    </body>
</html>
<script type='text/javascript'>
    $(document).ready(function() {
        /* initialize the external events
         -----------------------------------------------------------------*/
        $('#external-events div.external-event').each(function() {
            // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
            // it doesn't need to have a start or end
            var eventObject = {
                title: $.trim($(this).text()), // use the element's text as the event title
                uno: 'hola'
            };
            // store the Event Object in the DOM element so we can get to it later
            $(this).data('eventObject', eventObject);
            // make the event draggable using jQuery UI
            $(this).draggable({
                zIndex: 999,
                revert: true, // will cause the event to go back to its
                revertDuration: 0  //  original position after the drag
            });
        });
        /* initialize the calendar
         -----------------------------------------------------------------*/
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            editable: true,
            droppable: true, // this allows things to be dropped onto the calendar !!!
            drop: function(date, allDay, jsEvent, ui) { // this function is called when something is dropped
                console.log(date);
                console.log(jsEvent);
                console.log(allDay);
                console.log(ui);
                // retrieve the dropped element's stored Event Object
                var originalEventObject = $(this).data('eventObject');
                console.log(originalEventObject);
                // we need to copy it, so that multiple events don't have a reference to the same object
                var copiedEventObject = $.extend({}, originalEventObject);
                console.log(copiedEventObject);
                // assign it the date that was reported
                copiedEventObject.start = date;
                copiedEventObject.allDay = allDay;
                // render the event on the calendar
                // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
                $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
                // is the "remove after drop" checkbox checked?
                if ($('#drop-remove').is(':checked')) {
                    // if so, remove the element from the "Draggable Events" list
                    $(this).remove();
                }
            },
            eventClick: function(calEvent, jsEvent, view) {
                $("#_divDialog").dialog({
                    resizable: false,
                    height: 340,
                    width: 400,
                    modal: true,
                    title: 'Registrar Película'
                });
                $("#_divDialog").load('Videoteca/add.jsp?rid=125');
            }
        });
    });
</script>